<template>
  <!-- 新建/编辑 -->
  <el-dialog title="职位信息" :visible.sync="dialog" width="50%" append-to-body>
    <el-form ref="jobForm" :model="jobForm" :rules="rules" label-width="120px">
      <el-row :gutter="14">
        <el-col :span="12">
          <el-form-item label="职位名称" prop="jobName">
            <el-input
              v-model="jobForm.jobName"
              :disabled="!isEdit"
              placeholder="请输入职位名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学历要求" prop="education">
            <el-cascader
              v-model="jobForm.education"
              :disabled="!isEdit"
              :options="educationOptions"
              :props="props"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="薪资范围" prop="lowestSalary">
        <el-input
          v-model="jobForm.lowestSalary"
          :disabled="!isEdit"
          placeholder="最低"
          type="number"
          :min="0"
          style="width: 150px"
        />
        —
        <el-input
          v-model="jobForm.highestSalary"
          :disabled="!isEdit"
          placeholder="最高"
          style="width: 150px"
          :min="0"
          type="number"
        />
        元/天
      </el-form-item>
      <el-row :gutter="14">
        <el-col :span="12">
          <el-form-item label="招聘对象" prop="identify">
            <el-select
              v-model="jobForm.identify"
              placeholder="请选择招聘对象"
              :disabled="!isEdit"
            >
              <el-option
                v-for="item in studentType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作周期" prop="workPeriod">
            <el-select
              v-model="jobForm.workPeriod"
              :disabled="!isEdit"
              placeholder="请选择工作周期"
            >
              <el-option
                v-for="item in workPeriod"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="14">
        <el-col :span="12">
          <el-form-item label="招聘人数" prop="recruitmentCount">
            <el-input
              v-model="jobForm.recruitmentCount"
              :disabled="!isEdit"
              type="number"
              min="1"
              placeholder="请输入招聘人数"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实习周期(月)" prop="practicePeriod">
            <el-input
              v-model="jobForm.practicePeriod"
              :disabled="!isEdit"
              type="number"
              :min="1"
              :max="24"
              placeholder="请输入实习周期"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="上班城市" prop="city">
        <el-cascader
          v-model="jobForm.city"
          style="width: 50%"
          :disabled="!isEdit"
          :show-all-levels="false"
          :options="provinceAndCityData"
          :props="{ value: 'label' }"
          placeholder="请选择期望城市"
          @change="handleCityChange"
        />
      </el-form-item>
      <el-form-item label="上班地址" prop="workAddress">
        <el-input
          v-model="jobForm.workAddress"
          :disabled="!isEdit"
          placeholder="请输入上班地址"
        />
      </el-form-item>
      <el-row :gutter="14">
        <el-col :span="12">
          <el-form-item label="招聘企业" prop="companyName">
            <el-input
              v-model="jobForm.companyName"
              disabled
              placeholder="请输入招聘企业名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门" prop="department">
            <el-input
              v-model="jobForm.department"
              :disabled="!isEdit"
              placeholder="请输入部门"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="14">
        <el-col :span="12">
          <el-form-item label="工作语言" prop="jobLanguage">
            <el-select
              v-model="jobForm.jobLanguage"
              :disabled="!isEdit"
              placeholder="请选择工作语言"
            >
              <el-option label="中文" value="中文" />
              <el-option label="English" value="English" />
              <el-option label="不限" value="不限" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="福利标签" prop="welfareTags">
        <el-input
          v-if="isEdit"
          v-model.trim="welfareTag"
          style="width: 50%"
          placeholder="请输入福利标签,按回车生成"
          @keypress.enter.native="addTag"
          @blur="addTag('blur')"
        />
        <el-tooltip
          class="item"
          effect="dark"
          content="请输入福利标签,按回车生成"
          placement="top-start"
        >
          <i
            v-if="isEdit"
            class="el-icon-warning-outline"
            style="margin: 10px"
          />
        </el-tooltip>
        <div>
          <el-tag
            v-for="tag in jobForm.welfareTags"
            :key="tag"
            closable
            :type="tag"
            style="margin-right: 14px"
            @close="deleteWelfareTags"
          >
            {{ tag }}
          </el-tag>
        </div>
      </el-form-item>
      <el-form-item label="职位描述" prop="jobDescription">
        <el-input
          v-model="jobForm.jobDescription"
          :disabled="!isEdit"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 8 }"
          placeholder="职位职责：
任职资格：
加分项："
        />
      </el-form-item>
      <p style="text-align: center; color: #ff4949">
        应监管部门要求，请匆输入关于QQ、微信、邮箱、网址链接、薪资面议、性别歧视等内容，否则职位将不予发布。
      </p>
    </el-form>
    <el-row type="flex" class="row-bg" justify="end">
      <el-button @click="dialog = false">取 消</el-button>
      <el-button @click="review">预览</el-button>
      <el-button v-if="isEdit" type="primary" @click="submit">提交</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
import {
  educationOptions,
  studentType,
  workPeriod
} from '@/utils/frontDataDict.js'
import { provinceAndCityData } from '@/utils/frontDataDict.js'
import { deepClone } from '../../../../utils'
export default {
  name: 'JobEdit',
  props: {
    jobData: {
      type: [Object],
      default: () => {}
    }
  },
  data() {
    // 工资范围
    const checkSalary = (rule, value, callback) => {
      if (
        this.jobForm.lowestSalary === '' ||
        this.jobForm.highestSalary === ''
      ) {
        return callback(new Error('薪资范围不能为空'))
      } else if (
        this.jobForm.lowestSalary >= 0 &&
        this.jobForm.highestSalary >= 0 &&
        Number(this.jobForm.lowestSalary) > Number(this.jobForm.highestSalary)
      ) {
        return callback(new Error('薪资范围不合理'))
      } else {
        return callback()
      }
    }
    return {
      isEdit: true,
      provinceAndCityData: provinceAndCityData,
      props: { multiple: true }, // 学历要求多选
      workPeriod: workPeriod, // 工作周期
      studentType: studentType, // 学生类型
      educationOptions: educationOptions, // 学历要求
      dialog: false, //  默认展示，父组件在外面控制展示隐藏
      jobForm: {
        jobName: '', // 职位名称
        education: '', // 学历要求
        identify: '0', // 招聘对象 0在校 1应届,默认0
        city: [], // 工作城市
        workAddress: '', // 工作地址，非城市
        lowestSalary: '', // 最低薪资
        highestSalary: '', // 最高薪资
        companyName: '', // 招聘企业名称
        companyId: '', // 企业id
        welfareTags: [], // 福利标签
        jobDescription: '', // 职位描述
        workPeriod: '', // 工作周期
        practicePeriod: '', // 实习周期
        jobLanguage: '', // 工作语言
        recruitmentCount: '', // 招聘人数
        clickCount: 0, // 职位点击量，写死，后端冗余字段
        postCount: 0, // 职位投递量，写死，后端冗余字段
        department: '', // 部门
        status: 0, // 0 写死，后端冗余字段 职位状态：0 未发布，1 待审核，2 发布中，3 暂停发布
        salaryUnit: 'daily_salary' // 薪资类型 写死，后端冗余字段 daily_salary weekly_salary monthly_salary annual_salary
      },
      // 表单校验
      rules: {
        jobName: [
          {
            required: true,
            message: '职位名称不能为空',
            trigger: 'blur'
          }
        ],
        education: [
          { required: true, message: '学历要求不能为空', trigger: 'change' }
        ],
        identify: [
          { required: true, message: '招聘对象不能为空', trigger: 'change' }
        ],
        city: [
          {
            required: true,
            type: 'array',
            message: '工作城市不能为空',
            trigger: 'change'
          }
        ],
        workAddress: [
          {
            required: true,
            message: '工作地址不能为空',
            trigger: 'blur'
          }
        ],
        department: [
          {
            required: true,
            message: '部门不能为空',
            trigger: 'blur'
          }
        ],
        lowestSalary: [
          { required: true, validator: checkSalary, trigger: 'blur' }
        ],
        companyName: [
          { required: true, message: '招聘企业不能为空', trigger: 'blur' }
        ],
        welfareTags: [
          {
            required: true,
            type: 'array',
            message: '福利标签不能为空',
            trigger: 'blur'
          }
        ],
        jobDescription: [
          {
            required: true,
            message: '职位描述不能为空',
            trigger: 'blur'
          }
        ],
        workPeriod: [
          {
            required: true,
            message: '工作周期不能为空',
            trigger: 'change'
          }
        ],
        practicePeriod: [
          {
            required: true,
            message: '实习周期不能为空',
            trigger: 'blur'
          }
        ],
        jobLanguage: [
          {
            required: true,
            message: '工作语言不能为空',
            trigger: 'change'
          }
        ],
        recruitmentCount: [
          { required: true, message: '招聘人数不能为空', trigger: 'blur' }
        ]
      },
      welfareTag: '' // 准备创建的福利标签
    }
  },
  methods: {
    handleCityChange(data) {
      console.log('城市>>>', data)
    },
    open({ isEdit }) {
      this.isEdit = isEdit
      this.jobForm = this.$options.data().jobForm
      const jobData = JSON.parse(JSON.stringify(this.jobData))
      Object.assign(this.jobForm, jobData)
      this.dialog = true
      this.$refs.jobForm && this.$refs.jobForm.resetFields()
    },
    close() {
      this.jobForm = this.$options.data().jobForm
      this.dialog = false
    },
    deleteWelfareTags(tag) {
      this.jobForm.welfareTags.splice(this.jobForm.welfareTags.indexOf(tag), 1)
    },
    addTag(eventName) {
      if (this.welfareTag === '' && eventName === 'blur') {
        return
      }
      if (this.welfareTag === '') {
        this.$message.warning('福利标签不可为空')
        return
      }
      if (this.jobForm.welfareTags.indexOf(this.welfareTag) > -1) {
        this.$message.warning('该福利标签已存在')
        return
      }
      this.jobForm.welfareTags.push(this.welfareTag)
      this.welfareTag = ''
    },
    review() {
      this.$refs.jobForm.validate((boo) => {
        if (boo) {
          const jobForm = deepClone(this.jobForm)
          jobForm.city = JSON.stringify(jobForm.city)
          jobForm.education = JSON.stringify(jobForm.education)
          jobForm.welfareTags = JSON.stringify(jobForm.welfareTags)
          this.$emit('review', jobForm)
        }
      })
    },
    submit() {
      this.$refs.jobForm.validate((boo) => {
        if (boo) {
          const jobForm = deepClone(this.jobForm)
          jobForm.city = JSON.stringify(jobForm.city)
          jobForm.education = JSON.stringify(jobForm.education)
          jobForm.welfareTags = JSON.stringify(jobForm.welfareTags)
          this.$emit('submit', jobForm)
        }
      })
    }
  }
}
</script>
